<template>
  <div class="info">
   <van-cell-group>
    <van-cell title="配送信息">
      <template #label>
        <span class="title">{{shopInfos.description}}</span>
        <span>由商家配送提供配送，约{{shopInfos.deliveryTime}}分钟送达</span>
        <span>距离{{shopInfos.distance}}</span>
        <p>配送费￥{{shopInfos.deliveryPrice}}</p>
      </template>
    </van-cell>
    <van-cell title="活动与服务">
      <template #label>
        <ul>
          <li
          v-for="(item, index) in shopInfos.supports"
          :key="index"
          >
          <span class="name">{{item.name}}</span>
          <span>{{item.content}}</span>
          </li>
        </ul>
      </template>
    </van-cell>
    <van-cell title="商家实景">
      <template #label>
        <van-swipe
        :show-indicators="false"
        :loop="false"
        class="imglist"
        :width="142"
        >
          <van-swipe-item
          v-for="(pics, index) in shopInfos.pics"
          :key="index"
          >
            <div class="one">
              <img :src="pics" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>
      </template>
    </van-cell>
  </van-cell-group>
  <van-cell-group>
    <van-cell title="商家信息">
      <template #label>
        <span>品类</span>
        <span>{{shopInfos.category}}</span>
      </template>
    </van-cell>
    <van-cell title="">
      <template #label>
        <span>商家电话</span>
        <span>{{shopInfos.phone}}</span>
      </template>
    </van-cell>
    <van-cell title="">
      <template #label>
        <span>地址</span>
        <span>{{shopInfos.address}}</span>
      </template>
    </van-cell>
    <van-cell title="">
      <template #label>
        <span>营业时间</span>
        <span>{{shopInfos.workTime}}</span>
      </template>
    </van-cell>
  </van-cell-group>
  </div>
</template>

<script>
import { getShopInfo } from '@/api/detial'
export default {
  name: 'Info',
  data () {
    return {
      shopInfos: []
    }
  },
  async created () {
    const shopInfo = await getShopInfo()
    // console.log(shopInfo.data.data)
    this.shopInfos = shopInfo.data.data
  }
}
</script>

<style lang="less" scoped>
.title{
  background-color: skyblue;
  color: #fff;
}
.info span{
  margin: 10px;
}
 ul {
    font-size: 14px;
    li{
      margin-top: 6px;
    }
    .name{
      background-color: green;
      color: #fff;
      margin: 6px;
    }
  }
.one{
  width: 120px;
  height: 90px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>
